<template id="one-editor">
    <div
        :style="{ width: width + 'px'}"
        id="my-editor"
        class="editor-wrapper"
    ></div>
</template>

<!-- 引入组件 -->
<script src="__STATIC__/lib/wangeditor@4.7.0/wangEditor.js"></script>
<link href="__STATIC__/lib/wangeditor@4.7.0/wangEditor.css" rel="stylesheet" />
<script>
    Vue.component("one-editor", {
        template: "#one-editor",
        props: {
            // eslint-disable-next-line
            value: {
                type: String,
                default: "",
            },
            isClear: {
                type: Boolean,
                default: false,
            },
            width: {
                type: String,
                default: "750",
            },
            height: {
                type: String,
                default: "1080",
            },
        },
        data() {
            return {
                editor: null,
                editorContent: null,
            };
        },
        watch: {
            isClear(val) {
                // 触发清除文本域内容
                if (val) {
                    this.editor.txt.clear();
                    this.editorContent = null;
                }
            },
        },
        mounted() {
            this.initEditor();
        },
        methods: {
            getText() {
                this.editor.txt.text();
            },
            setText(value) {
                this.editor.txt.html(value);
            },
            initEditor() {
                const E = window.wangEditor;
                this.editor = new E(document.getElementById("my-editor"));
                this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
                this.editor.config.showLinkImg = false; //关闭通过图片地址添加图片
                this.editor.config.uploadImgServer =
                    "{:url('system/annex/upload')}"; //如果需要本地上传图片 需配置上传图片服务器地址 找后端要
                this.editor.config.uploadImgHeaders = {}; // 自定义 header
                this.editor.config.uploadFileName = "file"; // 后端接受上传文件的参数名
                this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
                this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
                this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
                this.editor.config.height = this.height; // 设置高度

                // 配置菜单 可根据文档进行添加
                this.editor.config.menus = [
                    "head",
                    "bold",
                    "fontSize",
                    "fontName",
                    "italic",
                    "underline",
                    "strikeThrough",
                    "indent",
                    "lineHeight",
                    "foreColor",
                    "backColor",
                    "link",
                    "list",
                    "todo",
                    "justify",
                    "quote",
                    "emoticon",
                    "image",
                    "video",
                    "table",
                    "code",
                    "splitLine",
                    "undo",
                    "redo",
                ];
                this.editor.config.fontNames = [
                    "宋体",
                    "微软雅黑",
                    "Arial",
                    "Tahoma",
                    "Verdana",
                ];
                this.editor.config.emotions = [
                    {
                        // tab 的标题
                        title: "默认",
                        // type -> 'emoji' / 'image'
                        type: "image",
                        // content -> 数组//自定义表情根据文档 自行添加
                        content: [
                            {
                                alt: "[微笑]",
                                type: "face",
                                src: "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png",
                            },
                            {
                                alt: "[可爱]",
                                type: "face",
                                src: "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png",
                            },
                            {
                                alt: "[空星]",
                                src: "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ff/hot_blankstar_org.png",
                            },
                        ],
                    },
                    {
                        // tab 的标题
                        title: "emoji",
                        // type -> 'emoji' / 'image'
                        type: "emoji",
                        // content -> 数组 自定义表情根据文档 自行添加
                        content: [
                            "😀",
                            "😃",
                            "😄",
                            "😁",
                            "😆",
                            "🤣",
                            "😄",
                            "😅",
                            "😆",
                            "😉",
                            "😊",
                            "😋",
                            "😎",
                            "😍",
                            "😘",
                            "😗",
                            "😚",
                            "🙂",
                            "🤗",
                            "🤔",
                            "😳",
                            "😑",
                            "😶",
                            "🙄",
                            "😏",
                            "😣",
                            "😥",
                            "😮",
                            "🤐",
                            "😯",
                            "😪",
                            "😫",
                            "😴",
                            "😌",
                            "😛",
                            "😜",
                            "😒",
                            "😓",
                            "😕",
                            "🙃",
                            "😲",
                            "🙁",
                            "😖",
                            "😤",
                            "😭",
                            "😨",
                            "😬",
                            "😱",
                            "😡",
                            "😠",
                            "😷",
                            "🤒",
                            "🤧",
                            "🤡",
                            "😈",
                            "💀",
                            "👻",
                            "👽",
                            "💩",
                            "😺",
                            "😸",
                            "😹",
                            "😻",
                            "😼",
                            "😽",
                            "🙀",
                            "😿",
                            "😾",
                            "💖",
                            "💗",
                            "💟",
                            "💤",
                            "💢",
                            "👈",
                            "👉",
                            "☝",
                            "👆",
                            "✌",
                            "👌",
                            "👍",
                            "👌",
                            "👎",
                            "✊",
                            "🤛",
                            "🤜",
                            "👏",
                            "🙏",
                            "🤝",
                            "🌹",
                            "🥀",
                        ],
                    },
                ];
                this.editor.config.uploadImgHooks = {
                    fail: (xhr, editor, result) => {
                        // 插入图片失败回调
                        console.log(xhr, editor, result);
                    },
                    success: (xhr, editor, result) => {
                        // 图片上传成功回调
                        console.log(xhr, editor, result);
                    },
                    timeout: (xhr, editor) => {
                        // 网络超时的回调
                        console.log(xhr, editor);
                    },
                    error: (xhr, editor) => {
                        // 图片上传错误的回调
                        console.log(xhr, editor);
                    },
                    customInsert: (insertImg, result, editor) => {
                        // 图片上传成功，插入图片的回调
                        // result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是result.data：[{"路径的形式"},...]
                        // console.log('result.data[0].url', result.data[0].url)
                        // insertImg()为插入图片的函数
                        // 循环插入图片
                        // console.log(editor);
                        for (let i = 0; i < 1; i++) {
                            // console.log("result", result); // 根据格式来赋值
                            const src = result.data.file; // 如果返回的是完整的src就不用拼接 !!!!这里需要注意
                            insertImg(src);
                        }
                    },
                };
                // 创建富文本编辑器
                this.editor.config.onchange = (html) => {
                    let str = html;
                    str = str.replace(/\bm.*?;/, "width:300px"); //更改插入到富文本里图片的宽度
                    this.editorContent = str;
                    this.$emit("change", this.editorContent); // 将内容同步到父组件中
                };
                this.editor.config.zIndex = 2; // 配置富文本的权重 不然会覆盖其他组件

                this.editor.create();
            },
        },
    });
</script>
<style lang="less" scoped>
    .my-editor {
        .editor-wrapper {
            text-align: left;
        }
    }
</style>
